<!doctype html>  

<head>
  <meta charset="utf-8">

  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Lightwave</title>
  <meta name="description" content="">
  <meta name="author" content="Torben Weis">

  <!--  Mobile viewport optimized: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- CSS : implied media="all" -->
  <link rel="stylesheet" href="css/wave.css">
  <link rel="stylesheet" href="css/wave_view.css">
</head>

<body onload="LW.Social.init()">

<div style="float:left; position:relative; top:-14px; left:-10px"><img src="/images/lightwave-small.png"></div>

<div style="float:right; font-size:10pt; margin-right:14px; margin-top:2px;">
  <span id="username">x@y</span> |
  <span id="logout" style="cursor:pointer; text-decoration:underline">Logout</span>
</div>

<div class="wave-panel" style="position:absolute; top:24px; bottom:20px; left:10px; width:180px;">
  <div class="wave-titlebar">Navigation</div>
  <div class="wave-section" style="overflow-y:auto; overflow-x:hidden; position:absolute; top:24px; bottom:10px; left:0px; right:0px;">
   <div class="clearfix" style="margin-bottom:6px"><img style="float:left; width:60px; margin-right:4px" src="../images/unknown.png"><span id="username2" style="color:#3b5998"></span></br><span style="color:#666" id="userid"></span></div>
   <div class="border"></div>
   <div id="show-home" class="navi-link">Home</div>
   <div id="show-friends" class="navi-link">Friends</div>
   <div id="show-info" class="navi-link">Info</div>
   <div id="friends" style="margin-top:12px; padding-top:2px; border-top:1px dotted #ccc"></div>
 </div>
</div>

<div class="wave-panel" style="position:absolute; top:24px; bottom:20px; left:200px; width:500px;">
  <div class="wave-titlebar">News Feed</div>
  <div class="wave-section" style="overflow-y:auto; overflow-x:hidden; position:absolute; top:24px; bottom:10px; left:0px; right:0px;">
   <div>Share&nbsp;&nbsp;<span id="show-share-status" style="color:#3b5998">Status</span>&nbsp;&nbsp;<span id="show-share-link" style="color:#3b5998">Link</span>&nbsp;&nbsp;<span style="color:#3b5998">Photo</span></div>
   <div class="clearfix" id="share-status" style="margin-top:4px; margin-bottom:4px">
     <div class="share-edit" id="share-status-edit" style="border-radius:6px; background-color:white; border:1px solid #bdc7d8; color:#999; padding:4px; margin-bottom:4px" contentEditable="true">What's on your mind?</div>
     <button id="share-status-button" class="share-button" style="float:right">Share</button>
   </div>
   <div class="clearfix" id="share-link" style="margin-top:4px; margin-bottom:4px">
     <div class="share-edit" id="share-link-edit" style="border-radius:6px; background-color:white; border:1px solid #bdc7d8; color:#999; padding:4px; margin-bottom:4px" contentEditable="true">http://</div>
     <button id="share-link-button" class="share-button" style="float:right">Share</button>
   </div>
   <div id="inbox"></div>
 </div>
</div>

<div class="wave-panel" style="position:absolute; top:24px; bottom:20px; left:710px; right:10px;" id="document-panel">
  <div class="wave-titlebar">Title</div>
  <div class="wave-section-blue participants">
    <div id="add-participant-button" style="float:left; position:relative; top:5px;"><button><span style="font-size:16px">+</span></button></div>
  </div>
  <div class="wave-section" style="overflow-y:auto; overflow-x:hidden; position:absolute; top:79px; bottom:10px; left:0px; right:0px;" id="document">
    <div class="mainthread"></div>
    <div class="reply clearfix" style="display:none; border-radius:6px; background-color:#ddd;color:#888;border:1px solid #888; padding:3px; font-style:italic; font-size:16px"><img class="author" src="../images/unknown.png"><div style="padding-top:4px">Click here to reply</div></div>
  </div>
</div>

<div id="home-panel" class="wave-panel" style="position:absolute; top:24px; bottom:20px; left:710px; right:10px; display:none">
  <div class="wave-titlebar">Home</div>
  <div class="wave-section" style="overflow-y:auto; overflow-x:hidden; position:absolute; top:79px; bottom:10px; left:0px; right:0px;" id="document">
  </div>
</div>

<div id="friends-panel" class="wave-panel" style="position:absolute; top:24px; bottom:20px; left:710px; right:10px; display:none">
  <div class="wave-titlebar">Friends</div>
  <div class="wave-section" style="overflow-y:auto; overflow-x:hidden; position:absolute; top:79px; bottom:10px; left:0px; right:0px;" id="document">
    <div class="border"></div>
    <div style="font-size:bold; margin-bottom:8px">People you might know</div>
    <table>
      <tbody id="people"></tbody>
    </table>
  </div>
</div>

<div id="info-panel" class="wave-panel" style="position:absolute; top:24px; bottom:20px; left:710px; right:10px; display:none">
  <div class="wave-titlebar">Personal Information</div>
  <div class="wave-section" style="overflow-y:auto; overflow-x:hidden; position:absolute; top:79px; bottom:10px; left:0px; right:0px;" id="document">
  </div>
</div>

<div class="wave-dialog" id="dlg-add-participants" style="position:absolute; left:50%; top:25%; width:300px; height:50%;">
  <div class="wave-titlebar">Add participants</div>
  <div class="wave-section-blue search">
    <div class="searchInner">
      <button style="float:left" onclick="">Add</button><span style="display:block; overflow:hidden"><input style="font-size:16px; outline:none; width:100%" type="text" class="wave-searchbox"></span>
    </div>
  </div>
  <div class="wave-section" id="newfriends" style="overflow-y:auto; overflow-x:hidden; position:absolute; top:79px; bottom:10px; left:0px; right:0px;">
  </div>
</div>

 <!-- Javascript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
  <script src="/scripts/tensor/jquery.js"></script>
 
  <!-- scripts concatenated and minified via ant build script-->
  <script src="scripts/social/ui.js"></script>
  <!-- end concatenated and minified scripts-->
  
  <script type="text/javascript" src="scripts/io.js"></script>
  <script type="text/javascript" src="scripts/ot.js"></script>
  <script type="text/javascript" src="scripts/doc.js"></script>
  <script type="text/javascript" src="scripts/inbox.js"></script>
  <script type="text/javascript" src="scripts/model.js"></script>
  <script type="text/javascript" src="scripts/controller.js"></script>
  <script type="text/javascript" src="scripts/editor.js"></script>
  <script type="text/javascript" src="scripts/richtext.js"></script>
</body>
</html>
